import React, { useState, useEffect } from 'react';

function FunctionComponent(props) {
    const [count, setCount] = useState(0)
    // Hook

    useEffect(()=>{
        document.title = `点击了${count}次`
    }, [count])
    
    return (
        <div>
            <div>FunctionComponent</div>
            <p>{ useClock().toLocaleTimeString() }</p>
            <button onClick={()=>setCount(count + 1)}>{ count }</button>
        </div>
    );
}

export default FunctionComponent;

// 自定义Hook，命名要用 use 开头
function useClock(){
    const [date, setDate] = useState(new Date())
    // 相当于 componentDidMount、componentDidUpdate、componentWillUnmount的集合
    useEffect(()=>{
        let timer = setInterval(()=>{
            setDate(new Date())
        }, 1000)
        return clearInterval(timer)
    }, [])
    return date
}
